<template>
    <div class="app-container">
        <el-row :gutter="20">
            <!--门店数据-->
            <!-- <el-col :span="4" :xs="24" style="margin-top: 3px">
				<div class="head-container">
					<label for="deptName" style="font-size: 13px;">门店名称：</label>
					<el-input id="deptName" v-model="deptName" placeholder="请输入门店名称" clearable size="small"
						prefix-icon="search" style="margin-bottom: 10px; width: 70%" />
				</div>
				<div class="head-container">
					<el-tree ref="deptTreeRef" :data="deptOptions" :props="{ label: 'storeName', children: 'children' }"
						:expand-on-click-node="false" :filter-node-method="filterNode" default-expand-all
						@node-click="handleNodeClick" />
				</div>
			</el-col> -->
            <!--用户数据-->
            <el-col :xs="24">
                <transition name="fade">
                    <el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch" label-width="90px">
                        <el-form-item label="用户账号:" prop="userName">
                            <el-input v-model="queryParams.userName" placeholder="请输入用户账号" clearable class="w-200"
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                        <el-form-item label="门店:" prop="storeId">
                            <el-tree-select check-strictly v-model="queryParams.storeId" :data="deptOptions"
                                :props="{ value: 'storeId', label: 'storeName', children: 'children' }" value-key="storeId"  node-key="storeId" default-expand-all filterable clearable placeholder="请选择归属门店" @change="handleQuery" />
                        </el-form-item>
                        <el-form-item label="用户昵称:" prop="nickName">
                            <el-input v-model="queryParams.nickName" placeholder="请输入用户昵称" clearable style="width: 200px"
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                        <el-form-item label="手机号码:" prop="phonenumber">
                            <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable style="width: 200px"
                                @keyup.enter.native="handleQuery" />
                        </el-form-item>
                        <el-form-item label="性别:" prop="sex">
                            <el-select v-model="queryParams.sex" placeholder="请选择性别" style="width: 200px" clearable
                                @change="handleQuery">
                                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label"
                                    :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="状态:" prop="status">
                            <el-select v-model="queryParams.status" placeholder="请选择状态" style="width: 200px" clearable
                                @change="handleQuery">
                                <el-option v-for="dict in sys_normal_disable" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="创建时间:" class="font-bold">
                            <el-date-picker v-model="dateRange" style="width: 240px" format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期"
                                end-placeholder="结束日期" @change="handleQuery"></el-date-picker>
                        </el-form-item>
                        <form-search @reset="resetQuery" @search="handleQuery" />
                    </el-form>
                </transition>

                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" icon="plus" size="small" @click="handleAdd"
                            v-hasPermi="['system:user:add']">新增</el-button>
                    </el-col>
                    <!-- <el-col :span="1.5">
						<el-button type="info" icon="upload" size="small" @click="handleImport"
							v-hasPermi="['system:user:import']">导入</el-button>
					</el-col> -->
                    <el-col :span="1.5">
                        <el-button type="warning" icon="download" size="small" @click="handleExport"
                            v-hasPermi="['system:user:export']">导出</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="danger" icon="delete" size="small" :disabled="multiple" @click="handleDelete"
                            v-hasPermi="['system:user:remove']">删除</el-button>
                    </el-col>
                    <!-- prettier-ignore -->
                    <right-toolbar v-model:showSearch="showSearch" @queryTable="getPageList" />
                </el-row>

                <el-table stripe border v-loading="loading" ref="pageTableRef" :data="userList"
                    @selection-change="handleSelectionChange" @row-click="row => {
                        console.log(row);
                    }
                        ">
                    <el-table-column type="selection" width="50" align="center" :selectable="checkSelected" />
                    <el-table-column label="序号" type="index" width="60" align="center" />
                    <el-table-column label="昵称" width="150" align="center" key="nickName" prop="nickName"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="门店" width="150" align="center" key="storeName" prop="store.storeName"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="账号" width="150" align="center" key="userName" prop="userName"
                        :show-overflow-tooltip="true" />
                    <el-table-column label="性别" width="100" align="center" key="sex" prop="sex">
                        <template #default="scope">
                            <span v-if="scope.row.sex === '0'">男</span>
                            <span v-else-if="scope.row.sex === '1'">女</span>
                            <span v-else class="text-yellow">未知</span>
                        </template>
                    </el-table-column>

                    <!-- <el-table-column label="岗位" align="center" prop="postNameArray" :show-overflow-tooltip="true">
                        <template #default="scope">
                            <data-tag v-model:roles-array="scope.row.postNameArray" />
                        </template>
                    </el-table-column> -->
                    <el-table-column label="角色" width="150" align="center" prop="roleNameArray" />
                    <el-table-column label="手机号码" width="120" align="center" key="phonenumber" prop="phonenumber" />
                    <el-table-column label="邮箱" width="200" align="center" key="email" prop="email" />
                    <el-table-column label="状态" width="100" align="center" key="status">
                        <template #default="scope">
                            <status-switch v-model:status-data="scope.row.status" activeColor="#00CD00"
                                inactiveColor="#CDBA96" @handleChange.native="handleStatusChange($event, scope.row)"
                                :title="scope.row.status === '0' ? '点击停用' : '点击启用'"
                                :disabled="scope.row.admin || isHeadquartersAdmin(scope.row)" />
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" align="center" prop="createTime" width="160">
                        <template #default="scope">
                            <span>{{ parseTime(scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" align="center" class-name="small-padding fixed-width"
                        fixed="right">
                        <template #default="scope">
                            <!-- prettier-ignore -->
                            <el-link class="table_link_btn" :underline="false" type="primary" icon="Edit"
                                :disabled="isHeadquartersAdmin(scope.row)" @click="handleUpdate(scope.row)"
                                v-hasPermi="['system:user:edit']">
                                <span class="table_link_text">修改</span>
                            </el-link>
                            <!-- prettier-ignore -->
                            <el-link class="table_link_btn" :underline="false" type="primary" icon="Refresh"
                                @click="handleResetPwd(scope.row)"
                                :disabled="scope.row.admin || isHeadquartersAdmin(scope.row)"
                                v-hasPermi="['system:user:resetPwd']">
                                <span class="table_link_text">重置</span>
                            </el-link>
                            <!-- prettier-ignore -->
                            <el-link class="table_link_btn" :underline="false"
                                :disabled="scope.row.admin || isHeadquartersAdmin(scope.row)" type="danger" icon="Delete"
                                @click="handleDelete(scope.row)" v-hasPermi="['system:user:remove']"><span
                                    class="table_link_text">删除</span></el-link>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                    v-model:limit="queryParams.pageSize" @pagination="getPageList" />
            </el-col>
        </el-row>

        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" v-model="open" class="dialogMedia" append-to-body @close="cleanSelect()">
            <!-- prettier-ignore -->
            <el-form ref="formRef" :model="form" :rules="rules" label-width="90px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户昵称" prop="nickName">
                            <el-input v-model="form.nickName" placeholder="请输入用户昵称" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="归属门店" prop="storeId">
                            <el-tree-select check-strictly v-model="form.storeId" :data="deptOptions"
                                :props="{ value: 'storeId', label: 'storeName', children: 'children' }" value-key="storeId"
                                style="width: 100%;" placeholder="请选择归属门店" default-expand-all filterable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="手机号码" prop="phonenumber">
                            <el-input v-model="form.phonenumber" placeholder="请输入手机号码" maxlength="11" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户邮箱" prop="email">
                            <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item v-if="form.userId == undefined" label="用户账号" prop="userName">
                            <el-input v-model="form.userName" placeholder="请输入用户账号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
                            <el-input v-model="form.password" placeholder="请输入用户密码" type="password" show-password />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户性别">
                            <el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%;">
                                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label"
                                    :value="dict.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属角色" prop="roleIds">
                            <el-select v-model="form.roleIds" :multiple-limit="1" multiple placeholder="请选择角色"
                                style="width: 100%;">
                                <el-option v-for="item in roleOptions" :key="parseInt(item.roleId)" :label="item.roleName"
                                    :value="parseInt(item.roleId)" :disabled="item.status == '1'"></el-option>
                            </el-select>
                        </el-form-item>
                        
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <!-- <el-form-item label="用户岗位">
                            <el-select v-model="form.postIds" multiple placeholder="请选择岗位" style="width: 100%;">
                                <el-option v-for="item in postOptions" :key="parseInt(item.postId)" :label="item.postName"
                                    :value="parseInt(item.postId)" :disabled="item.status == '1'"></el-option>
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="默认打印人">
                            <el-radio-group v-model="form.defaultPrinter" style="width: 100%;" @change="statusChange">
                                <!-- <el-radio v-for="dict in sys_normal_disable" :key="dict.label" :label="dict.value">{{
                                    dict.label ==="正常"?'是':'否' }}</el-radio> -->
                                <el-radio label="1">是</el-radio>
                                <el-radio label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户状态">
                            <el-radio-group v-model="form.status" style="width: 100%;" @change="statusChange">
                                <el-radio v-for="dict in sys_normal_disable" :key="dict.label" :label="dict.value">{{
                                    dict.label }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注信息">
                            <el-input v-model="form.remark" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea"
                                placeholder="请输入内容"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 用户导入对话框 -->
        <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body @close="cleanUploadRef()">
            <!-- prettier-ignore -->
            <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
                <i class="upload"></i>
                <div class="el-upload__text">
                    将文件拖到此处，或
                    <em>点击上传</em>
                </div>
                <template v-slot:tip>
                    <div class="el-upload__tip">
                        <!-- prettier-ignore -->
                        <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
                        <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
                    </div>
                </template>

                <!-- prettier-ignore -->
                <!-- <template v-slot:tip>
					<div class="el-upload__tip" style="color:red">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
				</template> -->
            </el-upload>
            <template #footer>
                <div class="dialog-footer">
                    <!-- prettier-ignore -->
                    <el-button type="primary" @click="submitFileForm">确 定</el-button>
                    <!-- prettier-ignore -->
                    <el-button @click="upload.open = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" name="User" setup>
import User from '@/api/request/system/user';

import { parseTime } from '@/utils/common';

// prettier-ignore
const {
	loading, queryFormRef, formRef, sys_normal_disable, deptTreeRef, single, multiple, showSearch, total, userList, title, deptOptions, open,
	deptName, dateRange, sys_user_sex, postOptions, roleOptions, form, defaultProps, upload, queryParams, rules, pageTableRef, uploadRef,
	getPageList, filterNode, handleNodeClick, handleStatusChange, cancel, handleQuery, resetQuery, handleSelectionChange, statusChange,
	handleAdd, handleUpdate, handleResetPwd, submitForm, handleDelete, handleExport, handleImport, importTemplate, handleFileUploadProgress,
	handleFileSuccess, submitFileForm, checkSelected, cleanSelect, cleanUploadRef, isHeadquartersAdmin
} = User();
</script>
<style>
.post-tag {
    float: left;
    margin: 5px 0 0 5px;
}
</style>
